<template>
    <div class="list">
        <span class="check">
            <input type="checkbox" v-model="all">
        </span>
        <span class="title">任务名称</span>
        <span class="createtime">创建时间</span>
        <span class="important">重要</span>
        <span class="operation">操作</span>
    </div>
    <Item v-for="item in tasks" :key="item.id" :item="item"></Item>
</template>

<script setup>
import Item from './Item.vue';
let props = defineProps(['tasks'])
// 全选反选
import { computed } from 'vue'
let all = computed({
    get() {
        // 通过子复选框的状态，计算出全选复选框的状态
        return props.tasks.every(item => item.isdone === true)
    },
    set(val) { // val 就是全选复选框的状态
        // 将所有子复选框的状态，更改为全选复选框的状态
        props.tasks.forEach(item => item.isdone = val)
    }
})
</script>

<style scoped>
.list {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    font-weight: bold;
}

.check {
    flex: 5%;
}

.title {
    flex: 20%;
}

.createtime {
    flex: 35%;
}

.important {
    flex: 15%;
}

.operation {
    flex: 25%;
}
</style>